Таблица «безопасных» цветов

255.255.204 | 255.255.153 | 255.255.102 | 255.255.51 | 255.255.0 | 204.204.0
FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00
255.204.102 | 255.204.0 | 255.204.51 | 204.153.0 | 204.153.51 | 153.102.0
FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600
255.153.0 | 255.153.51 | 204.153.102 | 204.102.0 | 153.102.51 | 102.51.0
FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300
255.204.153 | 255.153.102 | 255.102.0 | 204.102.51 | 153.51.0 | 102.0.0
FFCC99 | FF9966 | FF6600 | CC6633 | 993300 | 660000
255.102.51 | 204.51.0 | 255.51.0 | 255.0.0 | 204.0.0 | 153.0.0
FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000
255.204.204 | 255.153.153 | 255.102.102 | 255.51.51 | 255.0.51 | 204.0.51
FFCCCC | FF9999 | FF6666 | FF3333 | FF0033 | CC0033
204.153.153 | 204.102.102 | 204.51.51 | 153.51.51 | 153.0.51 | 51.0.0
CC9999 | CC6666 | CC3333 | 993333 | 990033 | 330000
255.102.153 | 255.51.102 | 255.0.102 | 204.51.102 | 153.102.102 | 102.51.51
FF6699 | FF3366 | FF0066 | CC3366 | 996666 | 663333
255.153.204 | 255.51.153 | 255.0.153 | 204.0.102 | 153.51.102 | 102.0.51
FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033
255.102.204 | 255.0.204 | 255.51.204 | 204.102.153 | 204.0.153 | 153.0.102
FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066
255.204.255 | 255.153.255 | 255.102.255 | 255.51.255 | 255.0.255 | 204.51.153
FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399
204.153.204 | 204.102.204 | 204.0.204 | 204.51.204 | 153.0.153 | 153.51.153
CC99CC | CC66CC | CC00CC | CC33CC | 990099 | 993399
204.102.255 | 204.51.255 | 204.0.255 | 153.0.204 | 153.102.153 | 102.0.102
CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066
204.153.255 | 153.51.204 | 153.51.255 | 153.0.255 | 102.0.153 | 102.51.102
CC99FF | 9933CC | 9933FF | 9900FF | 660099 | 663366
153.102.204 | 153.102.255 | 102.0.204 | 102.51.204 | 102.51.153 | 51.0.51
9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033
204.204.255 | 153.153.255 | 102.51.255 | 102.0.255 | 51.0.153 | 51.0.102
CCCCFF | 9999FF | 6633FF | 6600FF | 330099 | 330066
153.153.204 | 102.102.255 | 102.102.204 | 102.102.153 | 51.51.153 | 51.51.102
9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366
51.51.255 | 51.0.255 | 51.0.204 | 51.51.204 | 0.0.153 | 0.0.102
3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066
102.153.255 | 51.102.255 | 0.0.255 | 0.0.204 | 0.51.204 | 0.0.51
6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033
0.102.255 | 0.102.204 | 51.102.204 | 0.51.255 | 0.51.153 | 0.51.102
0066FF | 0066CC | 3366CC | 0033FF | 003399 | 003366
153.204.255 | 51.153.255 | 0.153.255 | 102.153.204 | 51.102.153 | 0.102.153
99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699
102.204.255 | 51.204.255 | 0.204.255 | 51.153.204 | 0.153.204 | 0.51.51
66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333
153.204.204 | 102.204.204 | 51.153.153 | 102.153.153 | 0.102.102 | 51.102.102
99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666
204.255.255 | 153.255.255 | 102.255.255 | 51.255.255 | 0.255.255 | 0.204.204
CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC
153.255.204 | 102.255.204 | 51.255.204 | 0.255.204 | 51.204.204 | 0.153.153
99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999
102.204.153 | 51.204.153 | 0.204.153 | 51.153.102 | 0.153.102 | 0.102.51
66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633
102.255.153 | 51.255.153 | 0.255.153 | 51.204.102 | 0.204.102 | 0.153.51
66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933
153.255.153 | 102.255.102 | 51.255.102 | 0.255.102 | 51.153.51 | 0.102.0
99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600
204.255.204 | 153.204.153 | 102.204.102 | 102.153.102 | 51.102.51 | 0.51.0
CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300
51.255.51 | 0.255.51 | 0.255.0 | 0.204.0 | 51.204.51 | 0.204.51
33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33
102.255.0 | 102.255.51 | 51.255.0 | 51.204.0 | 51.153.0 | 0.153.0
66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900
204.255.153 | 153.255.102 | 102.204.0 | 102.204.51 | 102.153.51 | 51.102.0
CCFF99 | 99FF66 | 66CC00 | 66CC33 | 669933 | 336600
153.255.0 | 153.255.51 | 153.204.102 | 153.204.0 | 153.204.51 | 102.153.0
99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900
204.255.102 | 204.255.0 | 204.255.51 | 204.204.153 | 102.102.51 | 51.51.0
CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300
204.204.102 | 204.204.51 | 153.153.51 | 153.153.102 | 153.153.0 | 102.102.0
CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600
255.255.255 | 204.204.204 | 153.153.153 | 102.102.102 | 51.51.51 | 0.0.0
FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000

Все цвета интернета

Вашему вниманию предлагается палитра цветов, рекомендуемых для экранного дизайна.

При создании изображения для публикации в сети главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает похожий или смешивает несколько соседних цветов (dithering). Иногда первоначальный цвет может быть заменен на что-то совершенно неподходящее.

Цвета из нашей палитры везде будут отображаться правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов.

Как пользоваться палитрой

Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего. Эти градации — 0, 51, 102, 153, 204, 255.

Над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).


Встроенный фрейм

Большая просьба обо всех замеченных
ашибках и очепятках
сообщать по адресу
zhunya@mail.ru


Справочник по HTML

  • Работа со шрифтами

  • Работа с абзацами

  • Работа с картинками

  • Работа со ссылками

  • Работа со списками

  • Работа с линиями

  • Работа со спецсимволами

  • Работа с логическими стилями

  • Работа с анкерами

  • Работа с цветами

  • Работа с таблицами

  • Работа с картами

  • Работа со звуком

  • Работа с фреймами

  • Работа со каскадными таблицами стилей (CSS)
            •

    Уважаемый посититель сейчас:

    Автор: Гноевой Никита
    Дата создания: 18.10.04


Работа со шрифтами

  • Теги:

    <H1> Делает текст самым крупным </H1>

    <H2> Делает текст чуть меньше </H2>

    <H3> Делает текст ещё меньше </H3>

    <H4> Делает текст ещё меньше </H4>

    <H5> Делает текст ёще меньше </H5>
    <H6> Делает текст самым маленьким </H6>

  • Теги:
    <u>Текст может быть подчёркнутый</u>     <s>Текст может быть перечёркнутый</s>     <b>Текст может быть жирным</b>
    <i>Текст может быть курсивом</i>     <font face="Arial">Текст может быть из разных шрифтов</font>
    <font face="Comic Sans MS">Текст может быть даже таким, каким угодно лишбы эти шрифты были у всех</font>

    <tt>Текст может быть фиксированым, как пишущая машинка</tt>

    <font color="#ab0000">Текст может быть какого угодна цвета</font>

    <big>Текст может быть большой</big>

    <small>Текст может быть маленький</small>

    Для изменения размера шрифта используется метка <font> ... </font>. Её аттрибуты:
    color="#hhhhhh" - цвет текста;
    size="n" - размер шрифта;
    face="имя_шрифта" - смена шрифта, где имя_шрифта может быть arial, verdana, helvetica, sans-serif и другие.

    Пример использования метки:
    <font size="5" color="red" face="sans-serif">Крупный шрифт красного цвета без засечек</font>

    Для размещения текста в верхнем или нижнем регистре используются соответственно
    метки <sup> ... </sup> (superscript) и <sub> ... </sub> (subscript). Пример их использования:

    в тексте:                       в окне браузера:

E=mc<sup>2</sup>                E=mc2
2<sup>x+2</sup>=64              2x+2=64
H<sub>2</sub>O                  H2O

    Мерцание текста
    <blink>Текст помещённый между этими тегами бедет мерцать.</blink>
    Но к сожалению, в Internet Explorer этот тег не работает.


Работа с абзацами

<P>Абзац делается так !!!</P> и по умолчанию абзац выравнен по левому краю.

<P align=center>Абзац может быть выравнен по центру.</P>

<P align=right>Абзац может быть выровнен по правому краю.</P>

<P align="justify">Это мой любимый атрибут абзаца, он выравнивает текст по обоим краям документа, и все становится милым и аккуратным. Почему же это опасный атрибут? Да не работает он в старых версиях броузеров, поэтому у тех, кто использует старые броузеры, он может не дейcтвовать (не отображаться), и вся красота-ляпота да аккуратность сойдет на нет (т.е. текст выровняется в таком случае по левому краю документа). Тем не менее я атрибутом justify злоупотребляю :-)</P>

Тег <blockquote> задаёт отступ текста от левого и правого края и от верхней и нижней строки.</blockquote>
Гноевой Никита

А тег <dd> задаёт отступ текста только от левого края.</dd>
Гноевой Никита

Тег <nobr>
Тег <nobr> (nо break, без обрыва) дает команду браузеру отображать весь текст в одной строке, не обрывая её. Если текст, заключенный в таги <nobr>, не поместится на экране, броузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там тег <br>.


Работа с картинками

  • Теги:
    <img src="картинка.jpg"> - эта команда вставит файл "картинка.jpg" в HTML документ. Вставлять можно: *.jpg, *.gif, *.bmp и пр.
    Если картинка находится в другой папке, то адрес нужно указывать полностью <img src="C:/Фотографии/Моя катинка.gif">.
    Если картинка находится на другом сервере или сайте, то адрес надо указывать полностью <img src="http://www.homepage.ru/my/my.jpg">.

    Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга <p> - <p align="justify">. Параметр align есть и у картинок:
    <img src="image1.gif" align="left" hspace="30" vspace="5" alt="Моя морда"> - см. пример 1.
    <img src="image1.gif" align="right" hspace="30" vspace="5" alt="Моя морда"> - см. пример 2.

    Но это не всё: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):
    (1) - <img src="pr1.png" align="bottom">
    (2) - <img src="pr1.png" align="middle">
    (3) - <img src="pr1.png" align="top">

    Кроме параметра align существует еще несколько параметров:
    (1) - <img src="pr1.png" vspace="10">
    (2) - <img src="pr1.png" hspace="30">
    (3) - <img src="pr1.png" alt="моя фотография">
    (4) - <img src="pr1.png" width="100">
    (5) - <img src="pr1.png" height="200">
    (6) - <img src="pr1.png" border="5">
    Теперь последуют обяснения по пунктам.
    (1) - параметр vspace задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задаётся в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям.
    (2) - параметр hspace тоже задаёт расстояние между текстом и рисунком, но по горизонтали. Расстояние задаётся в пикселях. В нашем примере оно равно 30 пикселям (точкам).
    (3) - параметр alt задаёт краткое описание картинки (комментарий). Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, то выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т. к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т. к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.
    (4) - параметр width задаёт ширину самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете её сделать или уже или шире).
    (5) - параметр height задаёт высоту самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой.
    (6) - параметр border задаёт толщину рамки вокруг самой картинки (в пикселях). Можно не задавать.

    Чтобы разместить саму картинку: справа или по центру воспользуйтесь параграфами.

    На последок ещё один полезный пример 3.

    Пример: попробуйте скопировать фразу, приведёееую ниже, и потом вставьте её куда нибудь. Что? не получилось? Ха-ха-ха.

    Попробуйте скопировать этот текст.


Работа со ссылками

  • Теги:
    <a href="адресс ссылки">надпись, указывающая куда ведёт ссылка</a>

    Если ссылка находится в одной папке с HTML документом, то адрес пишется очень просто: <a href="index.htm">на главную</a> - на главную страницу.
    Если ссылка ведёт к другому сайту, то следует писать так: <a href="http://www.nikita777.pochta.ru">на мой сайт</a> - на мой сайт.
    Чтобы направить ссылку на мыло, надо сделать так: <a href="mailto:nikita777@pochta.ru">на моё мыло</a> - на моё мыло.
    А чтобы была тема в окне электронной почты, надо сделать так: <a href="mailto:nikit777@pochta.ru?subject=тема сообщения"> - на моё мыло (с темой "По поводу рыбалки").
    Ссылкой может быть даже картинка: <a href="index.htm"><img src="image3.gif" alt="Это ссылка"> </a> - см. пример 4.
    Ссылка может быть даже с подсказкой: <a href="index.htm" title="Ваша подсказка">текст-ссылка</a> - на главную страницу (наведи курсор и увидишь подсказку).

    Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т. д.) Как это делается? Да все по тому же принципу:
     <a href="http://www.melody.ru/music.mp3">скачать песню</a>

    Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда жмешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):

    <a href="big.jpg" target="_blank"><img src="small.jpg"></a> - см. пример 5.

    Особый интерес представляет почтовая ссылка:
    <a href="mailto:pochta@mail.ru">pochta@mail.ru</a>

    У mailto есть еще некоторые опции:
    - ?subject=Тема пиcьма
    - &body=Текст вашего сообщения
    - &cc=copy1@mail.ru,copy2@mail.ru (копии письма через запятую)
    - &bcc=hidden_copy1@mail.ru,hidden_copy2@mail.ru (скрытые копии письма через запятую)

    Всё вместе это будет выглядеть так:

    <a href="mailto:pochta@mail.ru?subject=Hello&body=text&cc=copy@mail.ru&bcc=hidden_copy@mail.ru">pochta@mail.ru</a>

    Теперь если ваш ненаглядный посетитель нажмет такую ссылку, то его почтовая программа выдаст ему бланк нового письма с уже заполнеными полями - удобство да и только :-) На самом деле опции ?subject более чем достаточно в этой жизни.


Работа со списками

Работа с списками

Списки бывают такие:
  • первое место
  • второе место

    • <li>первое место</li>
    <li>второе место</li>     		Или такие:
  • первое место
  • второе место

    • <li type="circle">первое место</li>
    <li type="circle">второе место</li>     		Или такие:
  • первое место
  • второе место

    • <li type="square">первое место</li>
    <li type="square">второе место</li>

    Использование списков позволяет более удобно и наглядно представлять текст в окне браузера. Язык HTML поддерживает ненумерованные и нумерованные списки, списки определений.

    Ненумерованный список определяется метками <ul> ... </ul>. Нумерованный - метками <ol> ... </ol>. Элементы списка отмечаются метками <li>. В нумерованном списке элементы нумерует сам браузер. Примеры:

    <ul>Список коней:
    <li>Сивка
    <li>Бурка
    <li>вещая Каурка
    </ul>         		<ol>Список коней:
    <li>Сивка
    <li>Бурка
    <li>вещая Каурка
    </ol>
    Это дает на экране следующие списки:
      Список коней:
    • Сивка
    • Бурка
    • вещая Каурка
      Список коней:
    1. Сивка
    2. Бурка
    3. вещая Каурка

    Заметим, метка <li> непарная - т. е. метки </li> не существует.

    Список определений ограничивается метками <dl> ... </dl>. Элементы списка отмечаются следующим образом: меткой <dt> - определяемое слово или выражение, меткой <dd> - само определение. Пример:

    <dl> Расшифровка меток:
    <dt>ul<dd> unordered list - ненумерованный список
    <dt>ol<dd> ordered list - нумерованный список
    <dt>li<dd> list item - элемент списка
    <dt>dl<dd> definition list - список определений
    <dt>dt<dd> definition term - определяемый термин
    <dt>dd<dd> definition description - описание определения
    </dl>

    Результат на экране:

    Расшифровка меток:
    ul
    unordered list - ненумерованный список
    ol
    ordered list - нумерованный список
    li
    list item - элемент списка
    dl
    definition list - список определений
    dt
    definition term - определяемый термин
    dd
    definition description - описание определения

    Обратите внимание, метки <dt> и <dd> также, как и <li>, не имеют парных закрывающих меток. В метке <dl> можно использовать аттрибут compact, если его применить в предыдущем примере (<dl compact>), то результат выглядел бы так:

    Расшифровка меток:
    ul
    unordered list - ненумерованный список
    ol
    ordered list - нумерованный список
    li
    list item - элемент списка
    dl
    definition list - список определений
    dt
    definition term - определяемый термин
    dd
    definition description - описание определения

    Списки могут быть произвольно вложены (разумно ограничиться тремя уровнями вложения). Каждый элемент списка может содержать несколько абзацев.

    В списках могут использоваться следующие аттрибуты:

    type - определяет стиль представления элементов списка (для меток <ul> и <ol>), подробнее ниже;
    start - (только для нумерованного списка <ol>) определяет значение первого элемента списка. По умолчанию 1. Обратите внимание, что несмотря на то, что значение аттрибута - всегда числовое значение, элемент списка может быть быть нечисловым - в зависимости от значения аттрибута type;
    value - (только для метки <li>) устанавливает номер текущего элемента списка. Как и в предыдущем случае элемент списка может быть нечисловым, хотя его значение - всегда число.

    Значение аттрибута type для ненумерованного списка может быть следующим:

    • disc
    • square
    • circle

    Для нумерованного списка значение аттрибута type может быть одним из следующих:

    Значение type | Стиль представления элемента списка
    1 | арабские цифры | 1,2,3,...
    a | строчные буквы | a,b,c,...
    A | прописные буквы | A,b,C,...
    i | римские цифры | i,ii,iii,...
    I | римские цифры | I,II,III,...

    По умолчанию значения type устанавливаются в зависимости от степени вложенности списка.


Работа с линиями

У линии есть много различных параметров:
(1) <hr align="right"> (center или left)
(2) <hr width="30%"> (ширина линии в процентах/пикселях)
(3) <hr size="6"> (толщина линии)
(4) <hr noshade> (отмена объёмности)
(5) <hr color="#cc0000"> (цвет линии, только в Internet Explorer)

Примеры:
(1) <hr width="30%" align="right">

(3) <hr size="6" width="200" align="center">

(5) <hr color="#00cc00" width="40%">


Работа со спецсимволами

(1) - &lt; - <
(2) - &gt; - >
(3) - &quot; - "
(4) - &nbsp; - пробел
(5) - &amp; - &

Вообще &-последовательностей гораздо больше. Здесь стоит упомянуть еще о таких:

&nbsp;
(nonbreaking space) - неразрывный пробел. Браузеры игнорируют множественные обычные пробелы, этот же будет показан. Также используется для заполнения пустых ячеек таблицы, пустых абзацев, для склеивания слов (если набрать TOP&nbsp;100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесётся на следущую, например, при изменении шрифта или размера окна браузера);
&copy;
© (copyright) - авторские права (или как порой шутят: "скопировано правильно");

&reg;
® (registered trademark) - зарегистрированный товарный знак.

Куда и к какой теме пристроить следующий материал я так и не смог придумать, поэтому добавил к этому уроку. Это комментарии. Текст, расположенный в HTML-документе между <!-- и --> не будет отображен на экране при просмотре, а будет виден лишь при редактировании документа. Пример:

<!-- Это мой комментарий -->
<!-- А этот комментарий занимает в тексте
несколько
строк -->

Не допустите ошибку! В комментариях не допускается вставлять два и более дефисов подряд: -- или ----- (разные браузеры по разному реагируют на это).

Некоторые распространённые спецсимволы приведены в таблице.

Символ		HTML-тег	Символ		HTML-тег

<		&lt;		>		&gt;
&		&amp;		"		&quot;
©		&copy;		®		&reg;
™		&trade;		?		&cent;
£		&pound;		¤		&curren;
¥		&yen;		§		&sect;
¨		&uml;		ª		&ordf;
«		&laquo;		¬		&not;
¯		&macr;		°		&deg;
±		&plusmn;	²		&sup2;
³		&sup3;		´		&acute;
µ		&micro;		¶		&para;
·		&middot;	ç		&ccedil;
¸		&cedil;		¹		&sup1;
º		&ordm;		»		&raquo;
¼		&frac14;	½		&frac12;
¾		&frac34;	¿		&iquest;
à		&Agrave;	á		&Aacute;
â		&Acirc;		ã		&Atilde;
ä		&Auml;		å		&Aring;
æ		&AElig;		è		&Egrave;
é		&Eacute;	ê		&Ecirc;
ë		&Euml;		ì		&Igrave;
í		&Iacute;	î		&Icirc;
ï		&Iuml;		ð		&ETH;
ñ		&Ntilde;        ò		&Ograve;
ó		&Oacute;	ô		&Ocirc;
õ               &Otilde;        ö	        &Ouml;
×		&times;	        ø               &Oslash;
ù		&Ugrave;	ú		&Uacute;
û		&Ucirc;		ü		&Uuml;
ý		&Yacute;	þ		&THORN;
ß		&szlig;		 		&nbsp;

Также множество дополнительных спецсимволов приведены здесь.


Работа с логическими стилями

Используя логические стили, вы не можете точно знать, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по разному. Например, <strong> обычно выделяет текст жирным шрифтом, но кто-то из читателей захочет, возможно, чтобы в данном случае текст выделялся цветом. Таким образом логические стили дают большую свободу в выборе шрифтов пользователю.

<dfn> - служит для описания определений (это определение);
<em> - служит для выделения текста (это выделенное слово);
<cite> - служит для выделения цитат (это цитата);
<code> - служит для выделения программных кодов, текстов программ и т. п. Обычно выделяется шрифтом фиксированной ширины (это текст программы);
<kbd> - используется для ввода с клавиатуры пользователя (введите password);
<samp> - используется для вывода машинных сообщений (segmentation fault: core dumped);
<strong> - служит для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст);
<var> - используется для символьных переменных (это переменная);
<abbr> - используется для аббревиатур (СНГ, КПСС, WWW);
<acronym> - используется для сокращений (стр., англ.).
Элементы <abbr> и <acronym> могут содержать аттрибут <title>, описывающий расшифровку аббревиатуры или сокращения:
<abbr title="World Wide Web">WWW</abbr>
Элементы abbr и acronym используются для голосовых браузеров (для слепых, например), в остальных браузерах сокращения каким-либо шрифтом не выделяются.


Работа с анкерами

Можно делать ссылки внутри документа. Это удобно для перехода к разным главам одной большой статьи. Для этого необходимо создать некую опорную точку - анкер (anchor - якорь,англ.), на которую и будет происходить переход. Разберём это на примере. Допустим, нам надо перейти на начало этого урока. Для чего создадим такой анкер:
<a name="lesson4">Ссылки</a>
При этом слово "Ссылки" в тексте никак выделяться не будет. Теперь в тексте можем делать ссылку на анкер (и не один раз). Например, так:
Нажмите <a href="#lesson4">здесь</a> для возврата к началу урока и получите:
Нажмите здесь для возврата к началу урока
Можете нажать - пример работает! К этому анкеру можно перейти и из другого файла (например, чтобы сделать ссылку к конкретному уроку работа с шрифтами , а не урокам HTML вообще). Тогда ссылка будет выглядеть так:
Нажмите <a href="1.htm#lesson1"> сюда </a>, чтобы попасть на урок с шрифтами на слово "маленький".


Работа с цветами

Цвета состоят из шестнадцатеричных значений "#ffffff".
Первая пара это - красный цвет - #ff0000.
Второя пара это - зелёный цвет - #00ff00.
Третья пара это - синий цвет - #0000ff.

Фоном может служить и какое-то изображение.
При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется аттрибут background с указанием пути к рисунку. Например:
<body background="graph/picture.gif">содержимое web-страницы<body>

Обычно лучше работать с безопасными цветами, которые приведены здесь.

Фон страницы можно сделать фиксированным т. е. когда прокручиваешь страницу то фон не прокручиваеться или не сдвигается. На месте этот тег вставляется в тег <body bgproperties="fixed">.


Работа с таблицами

Чтобы разобраться в устройстве таблицы, расмотрим простой пример:

Таблица 1.
Ячейка 1 | Ячейка 2
Ячейка 3 | Ячейка 4

Такая табличка реализуется следующим кодом:

<table border="1" width="200" bgcolor="#A0DDA0">
<caption>Таблица 1.</caption>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

Таблица начинается с метки <table> и заканчивается </table>. Метка <table> может включать следующие аттрибуты:

  • width="n" - определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;
  • align="left" - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: left (слева), center (по центру страницы) и right (справа);
  • border="n" - устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки;
  • bordercolor="#hhhhhh" - устанавливает цвет рамки, где #hhhhhh - шестнадцатиричное значение цвета;
  • cellspacing="n" - определяет расстояние между рамками ячеек таблицы в пикселах;
  • cellpadding="n" - определяет расстояние в пикселах между рамкой ячейки и текстом;
  • bgcolor="#hhhhhh" - устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатиричное число.
  • background="picture.gif" - заполняет фон таблицы изображением;
  • frame="значение" - управляет внешней рамкой таблицы, может принимать следующие значения:
    • void - рамки нет (значение по умолчанию);
    • above - рисуется только граница сверху;
    • below - только граница снизу;
    • hsides - границы сверху и снизу;
    • vsides - только границы слева и справа;
    • lhs - только левая граница;
    • rhs - только правая граница;
    • box - рисуются все четыре стороны;
    • border - также все четыре стороны.
  • rules="значение" - управляет линиями, разделяющими ячейки таблицы. Возможные значения:
    • none - нет линий (значение по умолчанию);
    • groups - линии будут только между группами рядов (thead, tfoot, tbody) и группами колонок (colgroup, col) - о группах рассказано ниже;
    • rows - только между рядами;
    • cols - только между колонками;
    • all - между всеми рядами и колонками.

Таблица может иметь заголовок - метки <caption> и </caption>. Располагаться он должен непосредственно после метки <title ... >. Заголовок может иметь аттрибут align, определяющий положение заголовка относительно таблицы:
top | - значение по умолчанию, заголовок над таблицей по центру;
left | - заголовок над таблицей слева;
right | - заголовок над таблицей справа;
bottom | - заголовок под таблицей по центру.

Строки таблицы начинаются тэгом <tr> и заканчиваются </tr>. Могут иметь аттрибуты:

  • align="left" - устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение left (выравнивание влево), center (выравнивание по центру) и right (вправо);
  • valign="center" - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: top (выравнивание по верхнему краю), center (выравнивание по центру - это значение принимается по умолчанию), bottom (по нижнему краю);
  • bgcolor="#hhhhhh" - устанавливает цвет фона для строки.
  • background="picture.gif" - заполняет фон строки изображением.

Каждая ячейка таблицы начинается меткой <td> и заканчивается </td>. Может иметь следующие ттрибуты:

  • align="left" - устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение left (выравнивание влево), center (выравнивание по центру) и right (вправо);
  • valign="center" - устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: top (выравнивание по верхнему краю), center (выравнивание по центру - это значение принимается по умолчанию), bottom (по нижнему краю);
  • width="n" - определяет ширину ячейки в n пикселов;
  • height="n" - определяет высоту ячейки в n пикселов;
  • colspan="n" - устанавливает "размах" ячейки по горизонтали, т. е. colspan="3", например, означает, что ячейка будет простираться на 3 колонки;
  • rowspan="n" - устанавливает "размах" ячейки по вертикали. rowspan="2" означает, что ячейка занимает две строки таблицы;
  • nowrap - присутствие этого аттрибута показывает, что текст должен размещаться в одну строку;
  • bgcolor="#hhhhhh" - устанавливает цвет фона ячейки;
  • background="picture.gif" - заполняет фон ячейки изображением.

Кроме того любая ячейка таблицы может быть определена не метками <td> ... </td>, а метками <th></th> - table header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован.

Ряды таблицы могут быть объединены в группы. Для этого служат следующие метки:
<thead> ... </thead> - здесь объединяются ячейки верхнего заголовка таблицы;
<tfoot> ... </tfoot> - ячейки нижнего заголовка таблицы;
<tbody> ... </tbody> - а здесь объединяются ряды собственно содержимого таблицы (может быть несколько групп tbody).
Каждая группа должна содержать хотя бы один ряд <tr>. Группа tfoot должна находиться до tbody, хотя на экране она будет располагаться внизу таблицы (Netscape не поддерживает это). Все гуппы должны содержать одинаковое количество столбцов. Использование групп рядов: в идеале они предназначены для просмотра (скроллинга) больших таблиц независимо от заголовков. К сожалению, большинство браузеров пока не поддерживают эту функцию. Можно использовать группы рядов для рисования линий только между ними (а не между всеми рядами), или выборочного форматирования частей таблицы (горизонтальное, вертикальное выравнивание содержимого ячеек).

Столбцы таблицы также могут быть объединены в группы при помощи меток <colgroup> и <col>. Метка colgroup позволяет объединить столбцы в группы, которые могут выделяться, например, использованием аттрибута rules элемента table. Метка col позволяет применить какие-либо аттрибуты (выравнивание и т. п.) к нескольким столбцам не объединяя их в структурную группу.

<colgroup> может содержать следующие аттрибуты:

  • span="n" - в группе n столбцов (по умолчанию n=1). Браузер проигнорирует это значение, если между <colgroup> и <col> есть хотя бы один элемент <col>;
  • width="n" - ширина столбцов в группе. Значение n может задаваться в пикселах, процентах. Может быть задано относительным значением, а также иметь значение "0*", т. е. столбцы будут минимальной ширины, исходя из размеров содержимого ячеек;
  • align, valign - выравнивание содержимого ячеек.

<col> содержит те же аттрибуты, что и <colgroup>. Если ширина столбцов задана и в col, и в colgroup, то выбирается значение метки <col>. Метка <col> непарная, т. е. закрывающего тега у нее нет.

Пример. Будет создана таблица шириной в 20 столбцов. Первый столбец будет 40 пикселов шириной с выравниванием влево. Второй - минимально возможной ширины с выравниванием по центру. Остальные 18 - шириной в 20 пикселов и выравниванием по центру.

<table>
<colgroup width="20" align="center">
<col width="40" align="left">
<col width="0*">
<col span="18">
</colgroup>
<tr>
.....Содержимое таблицы......
</table>

К сожалению, браузеры Netscape поддерживают далеко не все возможности таблиц. В результате таблица, которая отлично выглядит в Microsoft Explorer, в Netscape может оказаться вообще без рамок.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект &nbsp; (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (&nbsp; - обязательно должен набираться строчными буквами и закрываться точкой с запятой).

Любая ячейка таблицы может содержать в себе еще одну таблицу.

Возможные ошибки в таблицах:

  • Метки, устанавливающие шрифт (<b>, <i>, даже <font size="n", font color="#hhhhhh"), необходимо повторять для каждой ячейки. Нельзя установить шрифт сразу для всей таблицы.
  • Таблица - конструкция нежная. При потере только одной метки <tr> она может повести себя напредсказуемо. Отсутствие метки </table> может привести к тому, что вся таблица вообще исчезнет с экрана.

Вот и вся премудрость. В руководствах и справочниках вы можете встретить параметры
bordercolorlight и bordercolordark - эти параметры понимает только Internet Explorer, поэтому не рекомендую их употреблять.
Пример:
<table border="3" bordercolor="#000000" bordercolordark="#0000ff">
<tr><td>Прикольная таблица</td></tr>
</table>

Прикольная таблица

Прикольная таблица

<th> и </th> - теги, отображающие текст заголовка или строки столбца немного более крупным полужирным шрифтом.


Работа с картами

Изображения-карты позволяют выделить отдельные области изображений и определить для каждой из них свое действие. Скажем, какие-то части картинки будут служить ссылками на другие страницы, после клика по другим областям рисунка будет загружен и проигран музыкальный фрагмент, или выполнен JavaScript. Ниже будет рассмотрен пример.

Существует два типа изображений-карт:

  • клиентские (client-side) - когда пользователь кликает по рисунку, браузер сам интерпретирует координаты клика. Он выбирает ссылку, определенную для данной области, и переходит по ней (либо выполняет заданное действие);
  • серверные (server-side) - координаты клика передаются для интерпретации на сервер и уже он делает соответствующие действия (например, возвращает браузеру URL для перехода).

Первый тип проще и доступнее, поэтому далее рассматривать будем только его.

Для создания изображения-карты используются элементы <map> и <area>.

Элемент map (так и переводится - "карта") должен обязательно иметь аттрибут name. Это позволяет указать браузеру, к какому именно рисунку на странице относится данная карта.

Элемент area имеет следующие аттрибуты:

  • shape - описывает форму выделяемой области, возможные значения:
    • rect - прямоугольник;
    • circle - круг;
    • poly - многоугольник;
    • default - определяет всю область.
  • coords - координаты, определяющие размеры и положение области на изображении. Количество и порядок значений зависит от значения аттрибута shape:
    • rect: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего);
    • circle: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус);
    • poly: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).
  • nohref - этот аттрибут определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца (подробности в примере ниже).
  • alt - альтернативный текст для выделенной области, используется невизуальными браузерами.
  • title - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.
  • target - значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ (подробнее в Уроке про фреймы).

Если описываемые области пересекаются (накладываются друг на друга), то приоритет имеет область, описанная первой.

Аттрибут usemap используется для того, чтобы соотнести какое-то изображение с определенной картой. Он может использоваться с элементами img (чаще всего!), object и input.

Теперь обещанный пример:

Пример изображения-карты

Контуры ссылок точно повторяют контуры рисунков. В данном примере при клике на ссылку будет лишь появляться сообщение "Нажата ссылка...", чтобы зря не гонять вас по страницам и не отнимать драгоценное время! Рассмотрим пример подробнее:

<img src="map1.gif" border="0" height="145" width="360" alt="Пример изображения-карты" usemap="#primer">
<map name="primer">
<area shape="poly" coords="11,9,200,9,200,26,61,26,61,36" title="Ссылка 1" href="javascript:alert('Нажата ссылка 1');">
<area shape="poly" coords="11,55,11,134,60,134" title="Ссылка 2" href="javascript:alert('Нажата ссылка 2');">
<area shape="rect" coords="80,64,200,94" title="Ссылка 3" href="javascript:alert('Нажата ссылка 3');">
<area shape="rect" coords="80,104,200,134" title="Ссылка 4" href="javascript:alert('Нажата ссылка 4');">
<area shape="circle" coords="285,72,43" title="Здесь нет ссылки" nohref>
<area shape="circle" coords="285,72,64" title="Ссылка кольцевая" href="javascript:alert('Нажата ссылка в виде кольца');">
</map>

У элемента img указан аттрибут usemap со значением "#primer1". И далее следует карта (map) с именем "primer1". Дело в том, что таких рисунков на странице может быть несколько, и соответственно несколько карт к ним. Более того, одна карта может подходить к нескольким рисункам (например, внизу и вверху страницы у вас размещены рисунки с навигацией по сайту). Чтобы браузер знал, какому рисунку какая карта соответствует, необходимо указывать имена.

Как сделано кольцо? Здесь две области в виде круга накладываются друг на друга. Первая область без ссылки (nohref) была описана первой, а уже потом вторая в виде круга большего диаметра. Ранее мы упоминали, что при наложении двух и более областей приоритет имеет область, описанная в тексте первой. Вот потому-то центральная часть круга и не имеет ссылки!

Об использовании аттрибута shape со значением "default". Если в данном примере после всех ссылок добавить, например, такую строку:
<area shape="default" href="javascript:alert('Вы нажали на фон');">
то весь оставшийся рисунок (в данном случае фон) станет ссылкой.

На самом деле находить все эти точки на огромном рисунке замучиешься. Поэтому для этого есть специальная прога "Map This! for Web Site", которая сама высчитывает координаты. Только придётся обрисовать контур элемента картинки и всё готово. Браво!! разработчикам этой проги!!!
Смотрите наглядный пример:


Работа со звуком

Рабоиа со звуком

Думаю, вам уже попадались странички, после загрузки которых начинала звучать музыка. Честно признаюсь, особого восторга от них я не испытываю. Но рассмотреть эту возможность надо.

Самый простой способ предложить посетителю послушать музыку, это сделать простую ссылку на звуковой файл. Вот так:

<a href="osen.mid">ДДТ - "Осень"</a>

Посетитель вашей страницы, увидев такую ссылку - ДДТ - "Осень", сам решит, хочет ли он это слушать и стоит ли по ней кликать. После клика по такой ссылке начнётся загрузка файла, который затем можно прослушать.

Чаще используют тег <embed>. Действие этого элемента следующее: после загрузки страницы автоматически загружается и проигрывается звуковой файл. При этом в окне появляется панель проигрывателя (или пульт управления проигрывателя - как вам удобнее называть). Пример:

<embed src="osen.mid" autostart="false">

Как всегда, тут не всё так безоблачно, как хотелось бы. По своей давней традиции создатели Netscape и Explorer не договорились между собой, и потому в разных браузерах эта панель выглядит и, самое обидное, ведет себя по разному.

Элемент <embed> может иметь следующие аттрибуты:

  • width - ширина панели в пикселах (можно и в процентах);
  • height - высота панели в пикселах (или процентах);
  • align - расположение панели относительно текста, возможные значения left, right, center;
  • hidden - позволяет скрыть панель, значения аттрибута: true - панель скрыта, false - панель видима (значение по умолчанию);
  • autostart - значение true - проигрыватель стартует автоматически, false - ждёт нажатия на кнопку "воспроизведение";
  • loop - цикл, т. е. при значении true мелодия будет проигрываться по кругу, а при значении false - только один раз. Если значением будет число, то Netscape проиграет мелодию указанное количество раз, для Explorer'а числовое значение равносильно значению true.

Пример использования перечисленных выше аттрибутов:

<embed src="osen.mid" hidden="true" autostart="true" loop="true">

В данном примере панель управления будет скрыта, воспроизведение звукового файла начинается автоматически, повторяться будет бесконечно. Думаю, посетитель вашего сайта достойно оценит такое решение!

Некоторые браузеры поддерживают еще аттрибут controls ("органы управления" - англ.), который позволяет сконфигурировать панель управления. Он может иметь следующие значения:

  • console - панель обычного размера;
  • smallconsole - панель меньшего размера;
  • playbutton - вместо всей панели только кнопка "Воспроизведение";
  • pausebutton - вместо всей панели только кнопка "Пауза";
  • stopbutton - вместо всей панели только кнопка "Стоп";
  • volumelever - вместо всей панели только регулятор громкости.

Элемент <embed> поддерживает звуковые файлы с расширениями MID, WAV, MP3, AIFF, AU, видеофайлы AVI, MPG, WMV.

Элемент <bgsound> задает фоновый звук для страницы, т. е. звуковой фрагмент, который будет звучать сразу после загрузки страницы. Браузером Netscape не поддерживается. Может иметь аттрибут loop, определяющий количество повторов фрагмента. Пример использования:

<bgsound src="osen.mid" loop="3">


Работа с фреймами

Объяснить, что такое фреймы и для чего они нужны, лучше всего на примере. Например, страницу, которую вы сейчас читаете, можно представить из двух фреймов: левого - в нём перечислены все уроки, и правого - с текстом самих уроков. Вы можете прокручивать содержимое правого фрейма, в то время как левый остается неподвижным. Это позволяет вам в любой момент легко перейти на любой урок, не разыскивая ссылку внизу или вверху страницы. Словом, разумное использование фреймов позволяет существенно упростить навигацию по сайту и улучшить его дизайн.

Суть фреймов в принципе проста: страница делится на несколько окон, в каждое из которых загружается своя страничка (или картинка), со своим собственным адресом. К примеру, в левом окне - "vasja.htm", а в правом - "pupkin.htm" (которая физически может находиться где-нибудь на другом сервере). Как и любые страницы в Интернете, они могут ссылаться на другие страницы и друг на друга. Кроме этих двух страниц вы должны написать третью, в которой и будут определяться размеры и свойства этих окон. Для этого используются только два тега - <frameset> и <frame>. Чтобы их объяснить, рассмотрим пример:

Во-первых, создадим два файла - "vasja.htm" и "pupkin.htm":

    <html>
    <head>
    <title>Фрейм 1</title>
    </head>
    <body>
    Меня зовут Вася!
    </body>
    </html>

    <html>
    <head>
    <title>фрейм</title>
    </head>
    <body>
    А фамилия моя Пупкин. Это звучит круто!
    </body>
    </html>

Теперь делаем третий файл, назовём его "index.htm" (назвать можно и по другому, поэтому в примере, приведённом ниже, это файл "primer6.htm" ):

<html>
<head>
<title>Страница с фреймами!</title>
</head>
<frameset cols="50%,50%">
<frame src="vasja.htm">
<frame src="pupkin.htm">
</frameset>
</html>

Вот его-то мы и рассмотрим подробнее. Во-первых, в нём отсутствуют теги <body> и </body>. Можно сказать, их роль выполняет тег <frameset>, хотя это не совсем верно. Тег <frameset> (переводится как "набор фреймов") с аттрибутом cols="50%,50%" указывает браузеру, что страница должна быть поделена на два окна (фрейма), каждый шириной в 50% от ширины страницы. Тег <frame> определяет содержимое и свойства каждого фрейма (заметьте, что он не имеет закрывающего тега). В данном случае указано, что содержимым первого фрейма является файл "vasja.htm", второго - файл "pupkin.htm" (фреймы считаются слева направо и сверху вниз. Результат отображения этих страниц можно увидеть на примере 6 в новом окне. Всё просто! Ещё несколько примеров:

20% 30% 50%
Три фрейма разной ширины.
<frameset cols="20%,30%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
25%
75%
Фреймы можно расположить рядами так же легко, как и столбцами. Просто меняем аттрибут cols на rows:
<frameset rows="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>

Значения аттрибутов cols и rows могут выражаться не только в процентах. cols="150,*,100" - страница разделена на три столбца, где ширина левого 150 пикселов, правого - 100 пикселов, а средний столбец - это всё оставшееся между ними место (знак *). Если вы будете размеры фреймов устанавливать в пикселах, то желательно ширину (или высоту) одного из них определить значком *. Можно, например, написать cols="150,550,100", и всё будет выглядеть отлично на вашем мониторе с разрешением 600*800. Но стоит только изменить разрешение, и картина полностью изменится. Потому-то и рекомендуется использовать "звёздочку".

200 * 100
Пример:
<frameset cols="200,*,100">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
150 * 2*
Можно устанавливать пропорции для окон. В этом примере левый фрейм будет шириной в 150 пикселов, а остальную часть страницы поделят между собой 2-й и 3-й фреймы, причем третий фрейм будет в 2 раза шире первого.
<frameset cols="150,*,2*">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
*
15%
3*
То же, но для рядов: 2-й фрейм занимает 15% от высоты окна, а 1-й и 3-й - все остальное в пропорции 1:3.
<frameset rows="*,15%,3*">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>

Фреймы могут быть вложенными друг в друга. Это позволяет создавать более сложные конструкции страниц. Рассмотрим несколько примеров:

40% 60%
*
<frameset rows="25%,*">
  <frameset cols="40%,60%">
  <frame src="page1.htm">
  <frame src="page2.htm">
  </frameset>
<frame src="page3.htm">
</frameset>

В этом примере окно разбито на два фрейма: верхний занимает 25% высоты, нижний - все остальное. В свою очередь верхний фрейм разбит еще на два, где левый фрейм занимает 40% от ширины окна, а правый - 60 процентов.

Ещё один пример. Предположим, мы хотим сделать такую страницу: окно, состоящее из левого фрейма шириной 200 пикселов, содержащего меню, и правого с каким-то текстом. Причём в левом фрейме вверху должен быть логотип высотой в 150 пикселов, размещенный в отдельном фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время будет оставаться на месте. Должно получиться следующее:
Logo Text
Menu
Banner
<frameset cols="200,*">
  <frameset rows="150,*">
    <frame src="logo.htm">
    <frame src="menu.htm">
  </frameset>
  <frameset rows="*,70">
    <frame src="text.htm">
    <frame src="banner.htm">
  </frameset>
</frameset>

Рассмотрим аттрибуты тегов <frameset> и <frame>. Первый из них, <frameset> - парный тег, т. е. он обязательно должен иметь закрывающий тег. Может включать следующие аттрибуты:

  • cols и rows - применение и возможные значения этих аттрибутов были рассмотрены выше. Внимание! Не рекомендуется одновременное использование аттрибутов cols и rows, т. е. в некоторых браузерах конструкция <frameset cols="50%,50%" rows="30%,70%"> может привести к непредсказуемым результатам;
  • border="x" - толщина рамок фреймов в пикселах;
  • frameborder="no|yes" или "0|1" - определяет отсутствие (no или 0) или наличие (yes или 1) рамок в определенном фреймсете. Например, таким образом в предыдущем примере можно было бы убрать только рамки между баннером и текстом и между логотипом и меню, а между левым и правым фреймами оставить;
  • bordercolor="#hhhhhh" - цвет рамок. Значением может быть шестнадцатиричное число или зарезервированное слово (red, blue, teal, olive и т. д.);

Тег <frame> может включать следующие аттрибуты:

  • src="имя" - указывает браузеру, что и откуда надо загружать в данный фрейм;
  • name="имя" - присваивает имя фрейму. Позволяет управлять данным фреймом из других. Например, клик по ссылке в одном фрейме будет вызывать загрузку страницы в другом фрейме (подробнее в следующем абзаце);
  • marginwidth="x" - величина отступа содержимого фрейма (текста, графики и т. п.) от границ по горизонтали. Выражается в пикселах, минимальное значение 1;
  • marginheight="y" - величина отступа по вертикали. Минимальное значение также 1;
  • scrolling="yes" - определяет наличие полос прокрутки у данного фрейма. Возможные значения аттрибута:
    • yes - полосы прокрутки присутствуют обязательно;
    • no - полосы прокрутки отсутствуют всегда - независимо от того, вмещается ли документ в фрейм целиком или нет;
    • auto - автоматический режим (значение по умолчанию): полосы прокрутки появляются при необходимости, т.е. если документ не вмещается в фрейм;
  • noresize - наличие этого аттрибута запрещает изменение размеров фрейма пользователем (обычно любую границу фрейма можно с легкостью переместить мышкой).

Как указывалось выше, аттрибут name тега <frame> позволяет присвоить каждому фрейму своё имя, что позволяет управлять содержимым одного фрейма из другого (т. е. как в этих уроках - вы кликаете по ссылке в левом фрейме, а меняется содержимое правого). Как это сделать, рассмотрим на примере:
Меню Урок 1
В левом фрейме у нас меню, а в правом - урок первый:
<frameset cols="200,*">
<frame src="menu.htm">
<frame src="urok1.htm" name="content">
</frameset>
Правому фрейму мы присвоили имя "content" (можно любое другое). Теперь создадим файл menu.htm, это будет меню для левого фрейма:

<html>
<head>
<title>menu</title>
</head>
<body>
<a href="urok1.htm" target="content">Урок 1</a>
<br>
<a href="urok2.htm" target="content">Урок 2</a>
<br>
<a href="urok3.htm" target="content">Урок 3</a>
<br>
<a href="urok4.htm" target="content">Урок 4</a>
<br>
</body>
</html>

Теперь клик по ссылке "Урок 2" вызовет загрузку страницы "urok2.htm" в фрейме с именем "content" (т. е. в правом фрейме). При отсутствии аттрибута target (перводится с английского как "цель") загрузка произошла бы в левом фрейме, где находится сама ссылка. Этот аттрибут в данном примере можно указать только один раз - как аттрибут тега <base>, т. е. все ссылки по умолчанию будут загружаться в фрейме с именем "content". В таком случае текст будет выглядеть так:

<html>
<head>
<title>menu</title>
</head>
<body>
<base target="content">
<a href="urok1.htm">Урок 1</a>
<br>
<a href="urok2.htm">Урок 2</a>
<br>
<a href="urok3.htm">Урок 3</a>
<br>
<a href="urok4.htm">Урок 4</a>
<br>
</body>
</html>

Кроме имени фрейма значением аттрибута target может быть одно из следующих зарезервированных слов:

  • _blank - браузер должен открыть новое окно и загрузить в него документ (на который была ссылка) - обычно используется для того, чтобы посетитель не уходил по ссылке с вашего сайта;
  • _top - браузер должен загрузить документ в этом же окне, предварительно очистив его от всех фреймов - аттрибут с этим значением надо указывать обязательно, если вы делаете ссылку на другой сайт из фрейма. В противном случае этот сайт будет загружен в фрейме;
  • _self - документ загружается в том же фрейме, где находится сама ссылка. Может потребоваться в случае, если в тексте есть строка <base target="имя_фрейма">;
  • _parent - документ загружается в родительский фреймсет текущего фрейма.

Все вышеперечисленные значения должны начинаться с символа подчеркивания и набираться только прописными буквами.

Используя на своем сайте фреймы, нельзя забывать о том, что некоторые браузеры могут не поддерживать фреймы - старые браузеры, речевые и др. Специально для них существует тег noframes, в котором можно сделать "нефреймовую" версию сайта, или хотя бы просто перечислить ссылки на страницы сайта. Пример:

<html>
<head>
<title>Уроки HTML</title>
</head>
<frameset cols="200,*">
<frame src="menu.htm">
<frame src="urok1.htm" name="content">
</frameset>
<noframes>
<body>
<p>Эта страница использует фреймы.
Поскольку Ваш браузер не может просматривать такие страницы,
воспользуйтесь следующими ссылками:
<p><a href="urok1.htm">Урок 1</a>
<p><a href="urok2.htm">Урок 2</a>
<p><a href="urok3.htm">Урок 3</a>
<p><a href="urok4.htm">Урок 4</a>
</body>
</noframes>
</html>

В результате браузер, поддерживающий просмотр фреймов, отобразит на эране только фреймы с их содержимым и проигнорирует всё, что находится между <noframes> и </noframes>. Остальные браузеры не обратят никакого внимания на содержимое контейнера <frameset>, но воспоизведут содержимое <noframes>. Ещё одна причина, по которой следует обращать внимание на тег <noframes> - далеко не все поисковые роботы понимают фреймы. Поэтому без <noframes> ваша страница рискует остаться непроиндексированной.

Придерживайтесь следующего порядка размещения: сперва контейнер <frameset>, а потом - <noframes> (т. е. как в примере). В противном случае возможна ошибка Netscap'а.

Существует ещё одна разновидность фреймов - встроенный фрейм (inline frame). Он может быть вставлен непосредственно в текст страницы и выглядит следующим образом:

Для встраивания такого фрейма используется тег <iframe>. Наличие закрывающего тега обязательно. Между ними можно вставлять любой текст для браузеров, не поддерживающих фреймы. Аттрибуты:

  • src="filename.htm" - указывает адрес содержимого фрейма;
  • name="name" - присвает имя фрейму;
  • width="x" - ширина фрейма;
  • height="y" - высота фрейма;
  • scrolling="yes|no|auto" - наличие полос прокрутки;
  • frameborder="1|0|yes|no" - наличие (yes или 1) или отсутствие (no или 0) рамки вокруг фрейма;
  • marginwidth="x" - величина отступа содержимого фрейма от границ по горизонтали;
  • marginheight="y" - величина отступа по вертикали.

Для примера выше был использован следующий код:

<iframe src="iframe.htm" width="300" height="70" scrolling="auto" frameborder="1">
Ваш браузер не поддерживает фреймы (у Вас Netscape?). Здесь должен быть размещён пример встроенного фрейма.
</iframe>

Размеры такого фрейма не могут изменяться пользователем. Поэтому аттрибут noresize не используется.

И в заключение совет. Если ваш сайт будет построен с использованием фреймов, то часто посетители будут к вам приходить с поисковиков, и чаще всего они будут попадать на одну из внутренних страниц сайта. Естественно, сайт они увидят совсем не в том виде, как это задумывалось вами. Чтобы этого не происходило, вставьте в текст страниц такой код:

<script language="JavaScript">
<!--
 if (self.parent.frames.length == 0)
 document.writeln("Эту страницу лучше просматривать во фрейме.");
 document.writeln("Если ваш браузер поддерживает фреймы, то");
 document.writeln("<a href=\"index.htm\">кликните здесь.</a>");
 // -->
</script>

Или такой:

<script language="JavaScript">
<!--
 if (self.parent.frames.length == 0)
 self.parent.location="index.htm";
 // -->
</script>

Первый скрипт выводит предложение перезагрузить страницу, если она была загружена не в фрейме. Второй делает то же самое, но без предупреждения.


Работа с каскадными таблицами стилей (CSS)

Что такое CSS и для чего это нужно? CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". Смысл - описывается стиль всего документа или сайта в целом, либо отдельных его элементов. Т. е. вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут их!). И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк!

Чтобы сразу объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая страница:

<html>
<head>
<title>Изучим таблицы стилей!</title>
</head>
<body>
<h1>Большой заголовок</h1>
<h2>Заголовок поменьше</h2>
<p>А это уже абзац - самый обычный абзац.</p>
</body>
</html>

А теперь где-нибудь в заголовке страницы (т. е. в секции head) разместим тэг <style>:

<style type="text/css">
<!--
h1 {font-size: 40px; background: red; text-align: right;
font-family: helvetica, arial, sans-serif}
h2 {font-size: 20px; font-style: italic; font-family: helvetica,
arial, sans-serif}
p {background: silver; text-align: center; font-family: courier,
fixed, monospace}
-->
</style>

Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика!), а можете сразу посмотреть этот пример 7 в действии.

Теперь разберём этот пример подробнее. Аттрибут type="text/css" и информация в комментарии (между "<!--" и "-->") как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров - они просто проигнорируют незнакомый тэг <style> и содержимое комментария, и ваша страница будет показана как самая обычная HTML-страница. Строка h1 указывает браузеру, что всякий текст, находящийся между метками <h1> и </h1>, должен отображаться шрифтом helvetica, arial или sans-serif высотой в 40 пикселов на красном фоне и быть выровнен вправо. Строка h2 определяет, что шрифт в заголовках <h2> должен быть наклонным и высотой в 20 пикселов из семейства helvetica. И, наконец, строка p определяет поведение всех абзацев на странице: на сером фоне, выровнены по центру, шрифт - courier, fixed или monospace.

Вот и всё. Как говорится, просто и со вкусом. Таким образом вы можете управлять проактически всем, что появляется на вашей странице. Т. е. практически любому тегу можно придать новые свойства. А теперь подробнее.

Font-family - шрифт, используемый для отображения данного элемента. В идеале, конечно, было бы неплохо, если бы у всех ваших посетителей были одинаковые наборы шрифтов. На практике же такого не бывает. Поэтому указывайте список шрифтов. Браузер просматривает этот список пока не встретит имеющийся в наличии шрифт. Например, компьютер с ОС Windows как правило имеет шрифт Arial, в компьютерах Macintosh наиболее похож на него шрифт Helvetica. В конце списка желательно иметь один из следующих: serif, sans-serif, monospace, fantasy или cursive. Пример: "p {font-family: arial, helvetica, sans-serif}"

Font-size - размер шрифта. Может указываться в точках (pt), пикселах (px).

Font-style: italic - курсив (наклонный шрифт).

Font-weight: bold - жирный шрифт. Значение может быть также числовым, только различные браузеры реагируют на это по-разному.

Text-transform - преобразование текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase (все буквы будут строчные), capitalize (каждое слово будет начинаться с заглавной буквы) и none (т. е. никаких действий).

Text-decoration - выделение текста, допустимые значения: underline (подчеркнутый), line-through (перечеркнутый), blink (мигающий) и none (ничего). Например, чтобы ссылки в тексте не выделялись подчеркиванием, можно включить в заголовок документа следующий текст:

<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
-->
</style>

Color - изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись ещё и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки style type... будут опускаться):

body {color: black}
a:link {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none}

Т. е. цвет текста на странице - чёрный (1-я строчка), ссылки (обычно голубого цвета) - неподчеркнутые чёрного цвета (2-я строчка), посещённые ссылки (обычно фиолетовые) - также чёрного цвета и неподчеркнутые (3-я строчка).

Background-color - определяет цвет фона для какого-либо элемента. Например:

strong {background-color: yellow}

Текст между метками <strong> и </strong> будет показан на жёлтом фоне.

Background-image - позволяет сделать фон в виде рисунка. Пример:

blockquote {background-image: url(million.jpg)}

В результате цитаты (т. е. текст между метками <blockquote> и </blockquote>) будет размещен на фоне рисунка "million.jpg". Примером служит данный абзац.

Text-align - выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово "text"). Например:

img {text-align: center}

Text-indent - позволяет делать отступ в первой строке абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применён к этому абзацу):

p {text-indent: 50pt}

Margin - устанавливает отступ текста. Пример использования:

body {margin-left: 20pt; margin-right: 30pt}

В результате текст на странице будет отступать слева на 20 точек от края страницы, справа - на 30 точек. Также возможны варианты: margin-top (отступ сверху) и margin-bottom (отступ снизу).

Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:

  • border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая);
  • border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
  • border-style - стиль рамки. Может иметь следующие значения:
    Значение Описание Вид рамки (в вашем браузере!)
    dashed пунктирная - в виде черточек
    dashed
    dotted пунктирная - в виде точек
    dotted
    double двойная линия
    double
    inset с эффектом вдавленности
    inset
    outset с эффектом выпуклости
    outset
    ridge выпуклая рамка
    ridge
    groove врезанная рамка
    groove
    solid непрерывная линия
    solid

Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:

blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double}

Здесь определена рамка со следующими границами: верхняя - красная двойная в 3 пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя - синяя сплошная шириной в 3 пиксела.

А что, если захочется изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать аттрибут style с необходимыми свойствами. Например:

<p style="text-indent: 15pt; color: red; background-color: white">
или
<h3 style="background-color: silver; border-width: 3px; border-style: groove;
border-color: #F0F0F0; text-align: center">

Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не писать аттрибут style каждый раз, можно поступить следующим образом: определить в заголовке документа в тэге style необходимый стиль и дать ему название, например:

<style type="text/css">
<!--
.krasota {text-indent: 20px; background-color: aqua; color: red;}
-->
</style>

Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:

<p class="krasota">

И напоследок. Можно определить стиль для всего сайта! Для этого создается текстовый документ, где перечисляются все стили, используемые на страницах сайта (заголовки и т. п. не требуются) и сохраняется с расширением .css (например, "stili.css"). Потом достаточно с каждой страницы сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в заголовке страницы (в секции head) и имеет такой вид:

<link rel=stylesheet href="stili.css" type="text/css">

Теперь достаточно сделать изменения в одном файле - в "stili.css" (или как вы там его назовете) - чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц!

Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в .css файле, то на ней будут применены её стили (т. е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например, <p style=".......">), то к данному тэгу будет применяться второй стиль.


Пример 1

Моя морда Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, чиркнуть пару строчек в мою гостевую книгу.

А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится ещё один виртуальный друг? :-)

На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего :-)

Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьём в кафешке? :-) Кто знает, может быть мы и в реальной жизни станем друзьями :-)


Пример 2

Моя морда Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, чиркнуть пару строчек в мою гостевую книгу.

А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится ещё один виртуальный друг? :-)

На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего :-)

Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьём в кафешке? :-) Кто знает, может быть мы и в реальной жизни станем друзьями :-)


Пример 3

Еще в самом начале обучения, в самых первых главах, я говорил о тэге <br>, который осуществляет принудительный перевод текста на другую строку (т. е. аналогичен нажатию клавиши Enter, когда мы форматируем текст в обычном текстовом редакторе).

В этой главе мы поговорим о параметре тэга <br> - clear. Зачем он нужен? Допустим текст обтекает какой-либо объект (например, картинку):

А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам. "Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

Нам нужно, чтобы текст после слов "...к моим гранитным ногам." обрывался, и ""Кушай, великий предок!"..." - уже продолжалось под картинкой. Вы, конечно, можете ввести несколько тэгов <br> и решить эту проблему. Но если вдруг картинка (объект) будет большой, текста много, то тут вы уже явно не обойдетесь несколькими <br>, тут вам придётся употребить их с десяток и больше. Так вот, чтобы вам не пришлось мучатся в таких ситуациях, и существует параметр clear:

А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

Теперь пример кода:

<img src="image2.gif" align="left" width="84" height="97">А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.<br clear="left">
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

У параметра clear существует несколько значений - all, left, right. all - завершить обтекание объекта текстом. left - завершить обтекание текстом объекта, выровненного по левому краю. right - завершить обтекание текстом объекта, выровненного по правому краю. В нашем примере мы задали clear="left", т. к. наша картинка выровнена по левому краю.


Пример 4

 Перейти на главную страницу


Изучим таблицы стилей!

Большой заголовок

Заголовок поменьше

А это уже абзац - самый обычный абзац.


Фрейм 2

 А фамилия моя Пупкин. Это звучит круто!


Специальные символы

Компьютерные шрифты содержат в себе больше символов, чем кажется, просто на все символы нехватит никаких клавиш. В HTMLе существует возможность получить эти символы на страничке при помощи специальной команды. Кроме того можно получить и обычные буквы - это иногда бывает полезным, чтобы обмануть какой-нибудь хитрый скрипт.

Воспользуемся для начала шрифтом TIMES NEW ROMAN, который обычно используется по умолчанию. Для того, чтобы получить на страничке какой-нибудь символ, надо вставить в её код специальную команду:
&#169; Copyright GOLEM
В результате чего на странице вы увидите:
© Copyright GOLEM
Изменяя номер можно легко получить любой, имеющийся в шрифте символ. Специально для вас босс нашей студии (товарищ Каратель) изготовил программу, которая отображала все символы. Мы составили небольшой список самых потенциально необходимых.

&#131 - ƒ
&#134 - †
&#135 - ‡
&#137 - ‰
&#149 - •
&#153 - ™
&#168 - ¨
&#169 - ©
&#174 - ®
&#175 - ¯
&#176 - °
&#177 - ±
&#178 - ²
&#179 - ³
&#182 - ¶
&#183 - ·
&#185 - ¹
&#188 - ¼
&#189 - ½
&#190 - ¾
&#8539 - ⅛
&#8540 - ⅜
&#8541 - ⅝
&#8542 - ⅞
&#191 - ¿
&#215 - ×
&#216 - Ø
&#331 - ŋ
&#937 - Ω
&#916 - Δ
&#920 - Θ
&#926 - Ξ
&#931 - Σ
&#936 - Ψ
&#945 - α
&#946 - β
 &#947 - γ
&#948 - δ
&#951 - η
&#952 - θ
&#955 - λ
&#957 - ν
&#958 - ξ
&#960 - π
&#961 - ρ
&#966 - φ
&#968 - ψ
&#969 - ω
&#1028 - Є
&#1072 - а
&#1073 - б
&#1074 - в
&#1075 - г
&#1076 - д
&#1077 - е
&#1078 - ж
&#1079 - з
&#1080 - и
&#1081 - й
&#1082 - к
&#1083 - л
&#1084 - м
&#1085 - н
&#1086 - о
&#1087 - п
&#1088 - р
&#1089 - с
&#1090 - т
&#1091 - у
&#1092 - ф
&#1093 - х
&#1094 - ц
 &#1095 - ч
&#1096 - ш
&#1097 - щ
&#1098 - ъ
&#1099 - ы
&#1100 - ь
&#1101 - э
&#1102 - ю
&#1103 - я
&#9786 - ☺
&#9787 - ☻
&#9788 - ☼
&#9792 - ♀
&#9794 - ♂
&#9824 - ♠
&#9827 - ♣
&#9829 - ♥
&#9830 - ♦
&#9834 - ♪
&#9835 - ♫
&#9702 - ◦
&#9689 - ◙
&#9688 - ◘
&#9679 - ●
&#9675 - ○
&#9674 - ◊
&#9668 - ◄
&#9660 - ▼
&#9658 - ►
&#9650 - ▲
&#9642 - ▪
&#9643 - ▫
&#9644 - ▬
&#9632 - ■
&#9619 - ▓
&#9618 - ▒
 &#9617 - ░
&#9616 - ▐
&#9608 - █
&#9604 - ▄
&#9600 - ▀
&#8494 - ℮
&#8467 - ℓ
&#8453 - ℅
&#8362 - ₪
&#8359 - ₧
&#8319 - ⁿ
&#8800 - ≠
&#8801 - ≡
&#8804 - ≤
&#8805 - ≥
&#8776 - ≈
&#8747 - ∫
&#8745 - ∩
&#8735 - ∟
&#8734 - ∞
&#8730 - √
&#8729 - ∙
&#8719 - ∏
&#8706 - ∂
&#8597 - ↕
&#8596 - ↔
&#8595 - ↓
&#8594 - →
&#8593 - ↑
&#8592 - ←
&#9552 - ═
&#9553 - ║
&#9554 - ╒
&#9555 - ╓
&#9556 - ╔
&#9557 - ╕
 &#9558 - ╖
&#9559 - ╗
&#9560 - ╘
&#9561 - ╙
&#9562 - ╚
&#9563 - ╛
&#9564 - ╜
&#9565 - ╝
&#9566 - ╞
&#9567 - ╟
&#9568 - ╠
&#9569 - ╡
&#9570 - ╢
&#9571 - ╣
&#9572 - ╤
&#9573 - ╥
&#9574 - ╦
&#9575 - ╧
&#9576 - ╨
&#9577 - ╩
&#9578 - ╪
&#9579 - ╫
&#9580 - ╬
&#161 - ¡
&#1563 - ؛
&#1567 - ؟
&#1645 - ٭
&#1750 - ۖ
&#305 - ı
&#254 - þ
&#954 - κ

Теперь используем графический шрифт - Webdings:

! - ( ! );
" - ( " );
# - ( # );
$ - ( $ );
% - ( % );
& - ( & );
' - ( ' );
+ - ( + );
, - ( , );
. - ( . );
2 - ( 2 );
= - ( = );
> - ( > );
@ - ( @ );
A - ( A );
B - ( B );
C - ( C );
D - ( D );
E - ( E );
F - ( F );
G - ( G );
H - ( H );
I - ( I );
J - ( J );
K - ( K );
L - ( L );
M - ( M );
N - ( N );
O - ( O );
P - ( P );
R - ( R );
S - ( S );
T - ( T );
 U - ( U );
W - ( W );
X - ( X );
Y - ( Y );
Z - ( Z );
&#96 - ( ` );
a - ( a );
b - ( b );
d - ( d );
e - ( e );
f - ( f );
h - ( h );
i - ( i );
j - ( j );
k - ( k );
l - ( l );
m - ( m );
n - ( n );
o - ( o );
p - ( p );
t - ( t );
v - ( v );
w - ( w );
x - ( x );
z - ( z );
&#126 - ( ~ );
&#128 - ( € );
&#129 - ( ? );
&#130 - ( ‚ );
&#131 - ( ƒ );
&#132 - ( „ );
&#133 - ( … );
&#134 - ( † );
 &#135 - ( ‡ );
&#136 - ( ˆ );
&#137 - ( ‰ );
&#138 - ( Š );
&#139 - ( ‹ );
&#140 - ( Œ );
&#141 - ( ? );
&#142 - ( Ž );
&#143 - ( ? );
&#144 - ( ? );
&#145 - ( ‘ );
&#146 - ( ’ );
&#147 - ( “ );
&#148 - ( ” );
&#149 - ( • );
&#150 - ( – );
&#151 - ( — );
&#152 - ( ˜ );
&#155 - ( › );
&#161 - ( ¡ );
&#163 - ( £ );
&#164 - ( ¤ );
&#165 - ( ¥ );
&#166 - ( ¦ );
&#167 - ( § );
&#168 - ( ¨ );
&#169 - ( © );
&#170 - ( ª );
&#171 - ( « );
&#174 - ( ® );
&#176 - ( ° );
&#177 - ( ± );
&#178 - ( ² );
 &#179 - ( ³ );
&#180 - ( ´ );
&#181 - ( µ );
&#183 - ( · );
&#184 - ( ¸ );
&#185 - ( ¹ );
&#186 - ( º );
&#187 - ( » );
&#190 - ( ¾ );
&#191 - ( ¿ );
&#192 - ( À );
&#193 - ( Á );
&#194 - ( Â );
&#195 - ( Ã );
&#196 - ( Ä );
&#197 - ( Å );
&#199 - ( Ç );
&#200 - ( È );
&#201 - ( É );
&#202 - ( Ê );
&#203 - ( Ë );
&#204 - ( Ì );
&#205 - ( Í );
&#206 - ( Î );
&#207 - ( Ï );
&#208 - ( Ð );
&#209 - ( Ñ );
&#210 - ( Ò );
&#211 - ( Ó );
&#212 - ( Ô );
&#213 - ( Õ );
&#214 - ( Ö );
&#221 - ( Ý );
 &#222 - ( Þ );
&#224 - ( à );
&#225 - ( á );
&#226 - ( â );
&#227 - ( ã );
&#228 - ( ä );
&#229 - ( å );
&#230 - ( æ );
&#231 - ( ç );
&#232 - ( è );
&#233 - ( é );
&#235 - ( ë );
&#236 - ( ì );
&#241 - ( ñ );
&#242 - ( ò );
&#243 - ( ó );
&#244 - ( ô );
&#245 - ( õ );
&#246 - ( ö );
&#1063 - ( Ч );
&#1064 - ( Ш );
&#1065 - ( Щ );
&#1066 - ( Ъ );
&#1067 - ( Ы );
&#1068 - ( Ь );
&#1095 - ( ч );
&#1096 - ( ш );
&#1097 - ( щ );
&#1099 - ( ы );
&#1100 - ( ь );
&#1101 - ( э );
&#1102 - ( ю );
&#1103 - ( я );

Есть еще один графический шрифт - Wingdings:

! - ( ! )
" - ( " )
# - ( # )
$ - ( $ )
% - ( % )
& - ( & )
' - ( ' )
( - ( ( )
) - ( ) )
* - ( * )
+ - ( + )
, - ( , )
- - ( - )
. - ( . )
/ - ( / )
0 - ( 0 )
1 - ( 1 )
2 - ( 2 )
3 - ( 3 )
4 - ( 4 )
5 - ( 5 )
6 - ( 6 )
7 - ( 7 )
8 - ( 8 )
9 - ( 9 )
: - ( : )
; - ( ; )
< - ( < )
= - ( = )
> - ( > )
? - ( ? )
A - ( A )
B - ( B )
C - ( C )
D - ( D )
E - ( E )
F - ( D )
G - ( G )
H - ( H )
 I - ( I )
J - ( J )
K - ( K )
L - ( L )
M - ( M )
N - ( N )
O - ( O )
P - ( P )
Q - ( Q )
R - ( R )
S - ( S )
T - ( T )
U - ( U )
V - ( V )
W - ( W )
X - ( X )
Y - ( Y )
Z - ( Z )
[ - ( [ )
\ - ( \ )
] - ( ] )
^ - ( ^ )
_ - ( _ )
` - ( ` )
a - ( a )
b - ( b )
c - ( c )
d - ( d )
e - ( e )
f - ( f )
g - ( g )
h - ( h )
i - ( i )
j - ( j )
k - ( k )
l - ( l )
m - ( m )
n - ( n )
o - ( o )
 p - ( p )
q - ( q )
r - ( r )
s - ( s )
t - ( t )
u - ( u )
v - ( v )
w - ( w )
x - ( x )
y - ( y )
z - ( z )
{ - ( { )
| - ( | )
&#128; - ( € )
&#129; - ( ? )
&#130; - ( ‚ )
&#131; - ( ƒ )
&#132; - ( „ )
&#133; - ( … )
&#134; - ( † )
&#135; - ( ‡ )
&#136; - ( ˆ )
&#137; - ( ‰ )
&#138; - ( Š )
&#139; - ( ‹ )
&#140; - ( Œ )
&#141; - ( ? )
&#142; - ( Ž )
&#143; - ( ? )
&#144; - ( ? )
&#145; - ( ‘ )
&#146; - ( ’ )
&#147; - ( “ )
&#148; - ( ” )
&#149; - ( • )
&#150; - ( – )
&#151; - ( — )
&#152; - ( ˜ )
&#153; - ( ™ )
 &#154; - ( š )
&#155; - ( › )
&#156; - ( œ )
&#157; - ( ? )
&#158; - ( ž )
&#159; - ( Ÿ )
&#160; - ( )
&#161; - ( ¡ )
&#162; - ( ¢ )
&#163; - ( £ )
&#164; - ( ¤ )
&#165; - ( ¥ )
&#166; - ( ¦ )
&#167; - ( § )
&#168; - ( ¨ )
&#169; - ( © )
&#170; - ( ª )
&#171; - ( « )
&#172; - ( ¬ )
&#173; - ( )
&#174; - ( ® )
&#175; - ( ¯ )
&#176; - ( ° )
&#177; - ( ± )
&#178; - ( ² )
&#179; - ( ³ )
&#180; - ( ´ )
&#181; - ( µ )
&#182; - ( ¶ )
&#195; - ( Ã )
&#196; - ( Ä )
&#197; - ( Å )
&#198; - ( Æ )
&#199; - ( Ç )
&#200; - ( È )
&#201; - ( É )
&#202; - ( Ê )
&#203; - ( Ë )
&#204; - ( Ì )
 &#205; - ( Í )
&#206; - ( Î )
&#207; - ( Ï )
&#208; - ( Ð )
&#209; - ( Ñ )
&#210; - ( Ò )
&#211; - ( Ó )
&#212; - ( Ô )
&#213; - ( Õ )
&#214; - ( Ö )
&#251; - ( û )
&#252; - ( ü )
&#253; - ( ý )
&#254; - ( þ )
&#255; - ( ÿ )

Кроме того можно использовать управляющие команды:

&quot;   --> "
&amp;    --> &
&lt;     --> <
&gt;     --> >
&nbsp;   -->
&brkbar;
&die;
&iexcl;  --> ¡
&cent;   --> ¢
&pound;  --> £
&curren; --> ¤
&yen;    --> ¥
&brvbar; --> ¦
&sect;   --> §
&uml;    --> ¨
&copy;   --> ©
&ordf;   --> ª
&laquo;  --> «
&not;    --> ¬
&shy;    -->
&reg;    --> ®
&macr;   --> ¯
&hibar;
&deg;    --> °
&plusmn; --> ±
&sup2;   --> ²
&sup3;   --> ³

&acute;  --> ´
&micro;  --> µ
&para;   --> ¶
&middot; --> ·
&cedil;  --> ¸
&sup1;   --> ¹
&ordm;   --> º
&raquo;  --> »
&frac14; --> ¼
&frac12; --> ½
&frac34; --> ¾
&iquest; --> ¿
&Agrave; --> À
&Aacute; --> Á
&Acirc;  --> Â
&Atilde; --> Ã
&Auml;   --> Ä
&Aring;  --> Å
&AElig;  --> Æ
&Ccedil; --> Ç
&Egrave; --> È
&Eacute; --> É
&Ecirc;  --> Ê
&Euml;   --> Ë
&Igrave; --> Ì
&Iacute; --> Í
&Icirc;  --> Î

&Iuml;   --> Ï
&ETH;    --> Ð
&Dstrok;
&Ntilde; --> Ñ
&Ograve; --> Ò
&Oacute; --> Ó
&Ocirc;  --> Ô
&Otilde; --> Õ
&Ouml;   --> Ö
&times;  --> ×
&Oslash; --> Ø
&Ugrave; --> Ù
&Uacute; --> Ú
&Ucirc;  --> Û
&Uuml;   --> Ü
&Yacute; --> Ý
&THORN;  --> Þ
&szlig;  --> ß
&agrave; --> à
&aacute; --> á
&acirc;  --> â
&atilde; --> ã
&auml;   --> ä
&aring;  --> å
&aelig;  --> æ
&ccedil; --> ç
&egrave; --> è

&eacute; --> é
&ecirc;  --> ê
&euml;   --> ë
&igrave; --> ì
&iacute; --> í
&icirc;  --> î
&iuml;   --> ï
&eth;    --> ð
&ntilde; --> ñ
&ograve; --> ò
&oacute; --> ó
&ocirc;  --> ô
&otilde; --> õ
&ouml;   --> ö
&divide; --> ÷
&oslash; --> ø
&ugrave; --> ù
&uacute; --> ú
&ucirc;  --> û
&uuml;   --> ü
&yacute; --> ý
&thorn;  --> þ
&yuml;   --> ÿ

Немного помудившись я получил следующее:

? ? ? ?

α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω

א ב ג ד ה ו ז ח ט י ך כ ל ם צ ק ר ש ת

ؤ ئ ب ة ت ث ج ح خ ز ش ض ظ غ ق ك م ن ه و ي ١ ٢ ٣ ٤ ٥ ٦ ٧ چ ژ

◊ ○ ● ◘ ◙ ◦ ☺ ☻ ☼ ♀ ♂ ♠ ♣ ♥ ♦ ♪ ♫

¿ ; ، ؛ , ؟ ? ٬ ‛ ! ¡ ¿ ; ، ؛ , ؟ ? ٬ ‛ ! ¡ ¿ ; ، ؛ , ؟ ? ٬ ‛ ! ¡

░▒▒▓▓▓████████▓▓▓KARATEL.NM.RU▓▓▓████████▓▓▓▒▒░

' ` · . , . · ` ' ` · . , . · ` ' ` · . , . · ` ' ` Пρuβ℮т, нαρo∂! ' ` · . , . · ` ' ` · . , . · ` ' ` · . , . · `

¯ ` · . _ . · ` ¯ ` · . _ . · ` ¯ ` · . _ . · ` ¯ ` Hi all! ¯ ` · . _ . · ` ¯ ` · . _ . · ` ¯ ` · . _ . · ` ¯ `

·,_,·`¯`·,_,·`¯`·,_,·`¯`·,_,·`¯`· КАРАТЕЛЬ ·`¯`·,_,·`¯`·,_,·`¯`·,_,·`¯`·,_,·`¯`

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒ ╔╗╔╗╔╗ ▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒ ║╠╣║║║ ▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒ ╚╝╚╝╚╝ ▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒


Фрейм 1

 Меня зовут Вася!